<template>
  <div>
    <TableBarVue>
      <template #title>
        <span>当前职位:{{ position }}</span>
      </template>
    </TableBarVue>
    <div class="box">
      <div class="title"><el-checkbox label="品牌管理"></el-checkbox></div>
      <table class="table">
        <tr>
          <el-checkbox-group v-model="brandList" style="padding-left: 30px">
            <el-checkbox label="品牌添加"></el-checkbox>
            <el-checkbox label="品牌编辑"></el-checkbox>
            <el-checkbox label="品牌删除"></el-checkbox>
            <el-checkbox label="品牌查看"></el-checkbox>
          </el-checkbox-group>
        </tr>
      </table>

      <div class="title"><el-checkbox label="商品分类"></el-checkbox></div>
      <table class="table">
        <tr>
          <el-checkbox-group v-model="comClassLIst" style="padding-left: 30px">
            <el-checkbox label="品牌添加"></el-checkbox>
            <el-checkbox label="品牌编辑"></el-checkbox>
            <el-checkbox label="品牌删除"></el-checkbox>
            <el-checkbox label="品牌查看"></el-checkbox>
          </el-checkbox-group>
        </tr>
      </table>

       <div class="title"><el-checkbox label="商品信息维护"></el-checkbox></div>
      <table class="table">
        <tr>
          <el-checkbox-group v-model="comInfoList" style="padding-left: 30px">
            <el-checkbox label="商品添加"></el-checkbox>
            <el-checkbox label="删除"></el-checkbox>
            <el-checkbox label="锁定价格"></el-checkbox>
            <el-checkbox label="导入"></el-checkbox>
            <el-checkbox label="导出"></el-checkbox>
            <el-checkbox label="上架"></el-checkbox>
          </el-checkbox-group>
        </tr>
      </table>

       <div class="title"><el-checkbox label="商品置顶"></el-checkbox></div>
      <table class="table">
        <tr>
          <el-checkbox-group v-model="comTopList" style="padding-left: 30px">
            <el-checkbox label="添加置顶"></el-checkbox>
            <el-checkbox label="删除置顶"></el-checkbox>
          </el-checkbox-group>
        </tr>
      </table>

       <div class="title"><el-checkbox label="订单"></el-checkbox></div>
      <table class="table">
        <tr>
          <el-checkbox-group v-model="orderList" style="padding-left: 30px">
            <el-checkbox label="订单添加"></el-checkbox>
            <el-checkbox label="订单编辑"></el-checkbox>
            <el-checkbox label="订单删除"></el-checkbox>
            <el-checkbox label="订单查看"></el-checkbox>
            <el-checkbox label="订单导出"></el-checkbox>
          </el-checkbox-group>
        </tr>
      </table>

    </div>
  </div>
</template>

<script>
import TableBarVue from "../../../components/tablebar/TableBar.vue";
export default {
  data() {
    return {
      position: "总经理",
      tableList: [
        {
          name: " 商品添加/编辑",
        },
        {
          name: " 商品添加/编辑",
        },
        {
          name: " 商品添加/编辑",
        },
        {
          name: " 商品添加/编辑",
        },
      ],
      brandList: [],//品牌
      comClassLIst:[],//商品分类
      comInfoList:[],//商品信息
      comTopList:[],//商品置顶
      orderList:[],//订单
    };
  },
  components: {
    TableBarVue,
  },
};
</script>

<style lang="scss" scoped>
.table {
  border: 1px solid #eee;
  border-collapse: collapse;
  width: 100%;
  & tr {
    border: 1px solid #eee;
    height: 50px;
    line-height: 50px;
    color: #666666;
    font-size: 14px;
  }
}
.title {
  height: 50px;
  width: 100%;
  line-height: 50px;
  font-size: 14px;
  color: #666666;
  text-indent: 10px;
  background-color: rgba(249, 250, 252, 1);
  border: 1px solid #eee;
  border-bottom: none;
  margin-top: 30px;
}
</style>